<template>
    <div class="ordermanager">
        <el-form ref="form"  label-width="80px" class="top">
            <el-form-item label="订单号">
                <el-input style="width:220px" v-model="ordernum" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
                <el-input style="width:220px" v-model="ordername" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input style="width:220px" v-model="phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select v-model="orderState"  placeholder="订单状态" @change="checkChange">
                <el-option label="已受理" value="已受理"></el-option>
                <el-option label="派送中" value="派送中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <!-- 时间 -->
        <div class="block">
            <span class="demonstration" style="padding:24px">选择时间</span>
            <el-date-picker
            :unlink-panels='true'
            v-model="timevalue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right">
            </el-date-picker>
          <el-button type="success" style="margin-left:20px" @click="queryBtn">查询</el-button>
        </div>
        <!-- 表格 -->
         <el-table  :data="orderData"  border  style="width: 100%; margin-top:40px">
          <el-table-column   fixed   prop="orderNo"  label="订单号"   width="100">  </el-table-column>
          <el-table-column  prop="orderTime"  label="下单时间"  width="120">  </el-table-column>
          <el-table-column  prop="phone"  label="手机号"  width="140">  </el-table-column>
          <el-table-column  prop="consignee" label="收货人"   width="200">  </el-table-column>
          <el-table-column  prop="deliverAddress"   label="配送地址"  width="200"> </el-table-column>
          <el-table-column  prop="deliveryTime"  label="送达时间"  width="120">  </el-table-column>
          <el-table-column  prop="remarks"  label="用户备注"  width="100">  </el-table-column>
          <el-table-column  prop="orderAmount"  label="订单金额"  width="100">  </el-table-column>
          <el-table-column  prop="orderState"  label="订单状态"  width="100">  </el-table-column>
          <el-table-column  fixed="right"  label="操作"   width="100">
          <template slot-scope="scope">
            <el-button @click="lookClick(scope.row)" type="text" size="small" style="color:#67C23A">查看</el-button>
            <el-button type="text" size="small" style="color:#67C23A" @click="editBtn(scope.row)">编辑</el-button>
          </template>
          </el-table-column>
         </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination style="padding:24px"   layout="total, prev, pager, next, jumper"  :total="total" @current-change='curchange'>  </el-pagination>
        </div>

      <!-- 查看对话框 -->
      <el-dialog id="look"
      title="查看订单"
      :visible.sync="lookOrder"
      width="40%">
      <p>订单ID：{{order.id}}</p>
      <p>订单号：{{order.orderNo}}</p>
      <p>下单时间：{{order.orderTime}}</p>
      <p>联系电话：{{order.phone}}</p>
      <p>收货人：{{order.consignee}}</p>
      <p>送货地址：{{order.deliverAddress}}</p>
      <p>送达时间：{{order.deliveryTime}}</p>
      <p>备注：{{order.remarks}}</p>
      <p>订单金额：{{order.orderAmount}}</p>
      <p>订单状态：{{order.orderState}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lookClose" style="background:#FFCC00;color:#fff">关闭</el-button>
      </span>
    </el-dialog>

      <!-- 编辑对话框 -->
   <el-dialog title="编辑订单" :visible.sync="editOrder"  width="40%" class="edit">
      <p><span>账 号 id : </span><el-input v-model="order.id" style="width:80%" disabled></el-input></p>
      <p><span>订 单 号 : </span><el-input v-model="order.orderNo" style="width:80%" disabled></el-input></p>
      <p><span>下单时间: </span><el-input v-model="order.orderTime" style="width:80%" disabled></el-input></p>
      <p><span>联系电话: </span><el-input v-model="order.phone" style="width:80%" ></el-input></p>
      <p><span>收 货 人 : </span><el-input v-model="order.consignee" style="width:80%" ></el-input></p>
      <p><span>送货地址: </span><el-input v-model="order.deliverAddress" style="width:80%" ></el-input></p>
      <p><span>送达时间: </span><el-input v-model="order.deliveryTime" style="width:80%" disabled></el-input></p>
      <p><span>订单备注: </span><el-input v-model="order.remarks" style="width:80%" ></el-input></p>
      <p><span>订单金额: </span><el-input v-model="order.orderAmount" style="width:80%" ></el-input></p>
      <p><span>订单状态: </span><el-input v-model="order.orderState" style="width:80%" ></el-input></p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editClose"  style="background:#FFCC00;color:#fff">关闭</el-button>
        <el-button @click="editSure" type="success">确定</el-button>
      </span>
    </el-dialog>

    </div>
</template>

<script>
      import {orderlist ,orderedit} from '@/apis/orders'
      import {HHMMSS} from '@/utils/utils'
      export default {
    data() {
      return {
        total:0,//总条数
        pageSize:5,//每页条数
        currentPage:1,//当前页码
        orderData: [],//表格数据
        
         timevalue: '',//时间
         ordernum:'',//订单号
         ordername:'',//收货人
         phone:'',//电话
         orderState:'', //订单状态

         lookOrder:false ,//查看订单
         editOrder:false ,//编辑订单

         order:'' ,//订单详情
      }
   
    },
    methods: {
      //渲染函数
      ordersList(){
        if(this.isclickpages){
          this.$message({
          message: '系统提示：操作过于频繁,稍后再试噢 （⊙ｏ⊙）',
          type: 'warning'
        });
          return 
        }
        this.isclickpages = true

        setTimeout(()=>{
          this.isclickpages = false
        },500)

        //请求
        orderlist({
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          orderNo:this.ordernum,
          consignee:this.ordername,
          phone:this.phone,
          orderState:this.orderState,
          date:JSON.stringify(this.timevalue)
        }).then(res=>{
          // console.log(res.data.data);
          for (const obj of res.data.data) {
            obj.orderTime = HHMMSS(obj.orderTime)
            obj.deliveryTime = HHMMSS(obj.deliveryTime)
          }
          this.total=res.data.total
          this.orderData = res.data.data
        })
      },
      //点击查看
        lookClick(item) {
        this.lookOrder = true
        this.order = item
        // console.log(this.order);
        // detail({id:item.id}).then(res=>{
        //   console.log(res.data);
        // })
      },
      //关闭查看
      lookClose(){
        this.lookOrder = false
      },
      //点击编辑
      editBtn(item){
        this.editOrder=true
        this.order = JSON.parse(JSON.stringify(item))
        // console.log(this.order);
      },
      //确定编辑
      editSure(){
        // console.log('sure');
        let {id,orderNo,orderTime,phone,consignee,deliverAddress,deliveryTime,remarks,orderAmount,orderState} = this.order
        //修改
        orderedit({
        id,
        orderNo,
        orderTime,
        phone,
        consignee,
        deliverAddress,
        deliveryTime,
        remarks,
        orderAmount,
        orderState,
        }).then(res=>{
          // console.log(res.data);
          if(res.data.code==0){
             this.$message({
              message: '系统提示：修改订单成功 ヾ(^▽^*)))',
              type: 'success'
            });
            this.editOrder=false
            this.ordersList()
          }
        })
      },
      //关闭编辑
      editClose(){
        this.editOrder=false
      },
      //分页
      curchange(page){
        // console.log(page);
        this.currentPage = page
        this.ordersList()
      },
       //订单状态
      checkChange(cate){
        this.category = cate
      },
      //点击查询
      queryBtn(){
        this.ordersList()
      },

    },
    created(){
      this.ordersList()

      this.$bus.emit('subTitle','订单管理>')
    }
  }
</script>

<style lang="less" scoped>
.top{
    display: flex;
}

.ordermanager{
  padding: 30px 0 100px 0;
  background: #fff;
}
p{
  margin-bottom: 10px;
}
#look p{
  border-bottom: 1px dashed #FFCC00;
  font-size: 18px;
  padding: 6px 0;
}
</style>